<template>
  <el-card>
    <!-- 查询表单 -->
    <el-form ref="queryParams" :model="queryParams" :inline="true" label-width="68px">
      <!-- 医生姓名选择框 -->
      <el-form-item label="医生姓名" prop="valueId">
        <el-select
            v-model="queryParams.valueId"
            placeholder=""
            clearable
            size="small"
            style="width:240px">
          <el-option
              v-for="user in userOptions"
              :key="user.userId"
              :label="user.userName"
              :value="user.userId"/>
        </el-select>
      </el-form-item>
      <!-- 查询日期选择器 -->
      <el-form-item label="查询日期" prop="dateRange">
        <el-date-picker
            v-model="queryParams.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <!-- 操作按钮 -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleBatchDelete" :disabled="!selectedRows.length">批量删除</el-button>
      </el-form-item>
    </el-form>

    <!-- 评论数据表格 -->
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <!-- 选择列 -->
      <el-table-column
          type="selection">
      </el-table-column>
      <!-- ID 列 -->
      <el-table-column
          prop="id"
          label="ID"
          align="center">
      </el-table-column>
      <!-- 医生姓名列 -->
      <el-table-column
          prop="userId"
          label="医生姓名"
          align="center"
          :formatter="userFormatter">
      </el-table-column>
      <!-- 评论内容列 -->
      <el-table-column
          prop="content"
          label="评论内容"
          align="center">
      </el-table-column>
      <!-- 评分列 -->
      <el-table-column
          prop="star"
          label="评分"
          align="center">
        <template slot-scope="scope">
          <el-rate
              v-model="scope.row.star"
              show-text
              disabled
              :score-template="`${scope.row.star}`">
          </el-rate>
        </template>
      </el-table-column>
      <!-- 类型列 -->
      <el-table-column
          prop="type"
          label="类型"
          align="center">
        <template slot-scope="scope">
          {{ typeFormatter(scope.row.type) }}
        </template>
      </el-table-column>
      <!-- 创建时间列 -->
      <el-table-column
          prop="addTime"
          label="创建时间"
          align="center">
      </el-table-column>
      <!-- 操作列 -->
      <el-table-column
          label="操作"
          align="center">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控件 -->
    <el-pagination
        :current="queryParams.pageNum"
        :page-sizes="[5, 10, 20, 30]"
        :pageSize="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryParams.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 评论数据
      queryParams: {
        pageNum: 1, // 当前页码
        pageSize: 5, // 每页条数
        total: 0 // 总条数
      },
      userOptions: [], // 医生姓名选项
      selectedRows: [] // 选中的行
    }
  },
  created() {
    this.loadComment(); // 加载评论数据
    this.loadUser(); // 加载医生数据
  },
  methods: {
    // 格式化医生姓名
    userFormatter(row) {
      let userName = "未知";
      this.userOptions.filter(item => {
        if (row.valueId === item.userId) {
          userName = item.userName;
        }
      })
      return userName;
    },
    // 格式化评论类型
    typeFormatter(type) {
      const types = {
        0: "患者给医生评论",
        1: "专题评论",
      };
      return types[type] || "普通评论";
    },
    // 加载评论数据
    loadComment() {
      this.$http.post("/statistics/comment/listPage", this.queryParams).then(resp => {
        this.tableData = resp.data.data.records;
        this.queryParams.total = resp.data.data.total;
      });
    },
    // 加载医生数据
    loadUser() {
      this.$http.get("/statistics/user/list").then(resp => {
        this.userOptions = resp.data.data;
      }).catch(error => {
        console.error("加载医生数据失败:", error);
      });
    },
    // 分页大小变化时触发
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.loadComment();
    },
    // 当前页码变化时触发
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.loadComment();
    },
    // 重置查询条件
    resetQuery() {
      this.queryParams = {pageNum: 1, pageSize: 5};
      this.loadComment();
    },
    // 执行搜索
    handleQuery() {
      this.loadComment();
    },
    // 选择变化时触发
    handleSelectionChange(val) {
      this.selectedRows = val;
    },
    // 执行删除操作
    handleDelete(row) {
      const id = row.id || this.id;
      this.$confirm('此操作将永久删除该用户数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.get("/statistics/comment/delete/" + id).then(resp => {
          if (resp.data.code === 200) {
            this.$message.success("删除成功");
            this.loadComment();
          } else {
            this.$message.error("删除失败");
          }
        }).catch(error => {
          this.$message.error("删除请求失败");
          console.error(error);
        });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    // 执行批量删除操作
    handleBatchDelete() {
      const id = this.selectedRows.map(row => row.id).join(',');
      if (id.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择要删除的评论'
        });
        return;
      }
      this.$confirm(`此操作将标记选中的 ${id.split(',').length} 条评论为删除, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.get(`/statistics/comment/batchDelete`, {params: {id}}).then(() => {
          this.$message({
            type: 'success',
            message: '批量删除成功!'
          });
          this.loadComment();
        }).catch(error => {
          console.error("批量删除评论失败:", error);
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style>
/* 自定义样式 */
</style>
